<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /* 
    - 可以解构对象自身或原型链上的属性/方法
    - 注意： 变量名需要与属性名一致，不要求顺序
    - 解构变量取别名: 一旦同名变量已存在, 需要取别名
    - 解构不存在的属性得到undefined
    - 解构变量可以指定默认值
    - 支持嵌套解构
    */
    // const obj = {
    //   name: 'tom',
    //   age: 12,
    //   foo: function () {
    //     console.log('foo()')
    //   },
    //   test: true
    // }

    // // 需求: 取出对象的部分或所有属性/方法, 以便后面分别使用
    // // 不使用解构
    // const n = obj.name
    // const a = obj.age
    // const f = obj.foo
    // // 使用解构
    // const {name, foo, age, toString} = obj
    // console.log(name, age, foo, toString)

    // /* 注意： 变量名需要与属性名一致，不要求顺序 */

    // /* 解构变量取别名: 一旦同名变量已存在, 需要取别名 */
    // const test = 123
    // const {test: t} = obj
    // console.log(t, test)


    //  /* 解构不存在的属性得到undefined */
    //  const {bar} = obj
    // console.log(bar)
    // /* 解构变量可以指定默认值 */
    // const {sex='男'} = obj
    // console.log(sex)

    // /* 支持嵌套解构 */
    // const obj2 = {
    //   a1: 2,
    //   a2: {
    //     a3: 3,
    //     a4: 4
    //   }
    // }
    // // 需要取出a3的值
    // // const a3 = obj2.a2.a3
    // const {a2: {a3, a4}, a2} = obj2
    // console.log(a3, a4)
    // console.log(a2)


    /* 
    数组的解构赋值
    - 数组解构是按顺序取, 变量名不要求
    - 解构失败得到undefined
    - 解构变量可以指定默认值
    - 支持嵌套解构
    */
    // const arr = [1, 3, 5]

    // /* 数组解构是按顺序取, 变量名不要求 */
    // const [a, b, c] = arr
    // console.log(a, b, c) // 1 3 5
    // /* 解构失败得到undefined */
    // const [e, f] = [2]
    // console.log(e, f) // 2 undefined
    // /*  解构变量可以指定默认值 */
    // const [g, h=0] = [3]
    // console.log(g, h)  // 3 0

    // /* 支持嵌套解构 */
    // const arr2 = [2, {a: 3}, [4]]
    // const [_, {a: a1}, [a2]] = arr2
    // console.log(a1, a2) // 3 4
    // console.log(_)


    /* 
    解构赋值的应用
    */
    /* 应用1:交换两个变量 */
    let a = 2
    let b = 3
    ;[b, a] = [a, b]
    console.log(a, b)

    /* 应用2：解构函数返回的数组或对象 */
    function fn() {
      return [2, 3]
    }
    const [c, d] = fn()
    console.log(c, d)

    function fn2() {
      return {
        c: 4, 
        d: 5
      }
    }
    const {c:c1, d:d1} = fn2()
    console.log(c1, d1)

    /* 应用3：解构形参 */
    function fn3([a, b]) {
      console.log('fn3', a, b)
    }
    fn3([5, 6])

    function fn4({c, d}) {
      console.log(c, d)
    }
    fn4({c: 7, d: 8})
    
  </script>
</body>
</html>